<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>

</style>
<body>
    <div id="app">
        <button @click="isShow=!isShow">toggle</button>
        <!-- <p v-show="isShow">我是需要显示的</p> -->
        <!-- <p v-if="isShow">我是需要显示的</p>
        <p v-else>我不显示！！！！</p> -->

        <!-- <template v-if="isShow">
            <div>divdivdiv</div>
            <p>pppppp</p>
        </template> -->
    </div>

    <script src="./base/vue.js"></script>
    <script>
        /*
            v-if指令      true代表显示   false代表移除 （dom节点之间删掉了）
            v-show指令    true代表display:block   false代表：display:none
            v-else 只能与 v-if 搭配使用
        
            v-if 与 v-show区别？
                v-if是实现元素插入与删除  v-show只是样式的切换
                v-else只能与v-if搭配使用
                template嵌套的话只能使用v-if(插入删除)
        */
     new Vue({
       el: '#app',
        data: {
            isShow:true
        }
     })

    </script>
</body>
</html>